<template>
  <div class="modal">
    <order-operate-template :fixedAmount="fixedAmount" @click="hideBuyNow">
      立即投注
      <template v-slot:buttons>
        <div class="btns">
          <button 
            class="btn cancel button-unselected"
            @click="handleCancel"
          >取消</button>
          <button 
            :disabled="getBuyingQuantity ? false : true"
            class="btn confirm button-selected"
            @click="handleBuyingNow"
          >确认投注</button>
        </div>
      </template>
    </order-operate-template>
  </div>
</template>
<script>
import OrderOperateTemplate from '@/components/base/phone/order-operate-template/order-operate-template'
import { addLotteryToCartMixin } from '@/assets/js/mixin.js'
import { mapGetters, mapMutations } from 'vuex'
export default {
  mixins: [addLotteryToCartMixin],
  components: {
    OrderOperateTemplate
  },
  data() {
    return {
      fixedAmount: [
        {
          id: 1,
          amount: 10,
        },
        {
          id: 2,
          amount: 20,
        },
        {
          id: 3,
          amount: 50,
        },
        {
          id: 4,
          amount: 100,
        },
        {
          id: 5,
          amount: 500,
        },
      ]
    }
  },
  methods: {
    hideBuyNow() {
      this.$emit('click', false)
    },
    handleBuyingNow() {
      this.$emit('click', false)
     
      this.$router.push({path: '/order/success'})
    },
    handleCancel() {
      this.$emit('click', false)
    },
    ...mapMutations('lottery', {
      clearState: 'CLEAR_STATE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getBuyingQuantity'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .modal
    position fixed
    top 0 
    left 0
    right 0
    bottom 0
    background rgba($color-theme-dark, 0.5)
    z-index 100

</style>